<template>
	<view class="make">
		
		<!-- 导航条 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in nav" @tap="navindex=index">{{item.name}}<view class="icon" v-show="navindex===index"></view></view>
		</view>
		<block v-for="(item,index) in list" :key="index">
		<make-list :list="item" v-show="nav[navindex].name==='全部' || nav[navindex].name===item.state"></make-list>
		</block>
		
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				nav:[
					{id:0,name:"全部"},
					{id:1,name:"待接单"},
					{id:2,name:"待上门"},
					{id:3,name:"已完成"}
				],
				navindex:0
			};
		},
		computed:{
			...mapState({
				list:state=>state.make.list
			})
		}
	}
</script>

<style lang="less" scoped>
.make{
	width: 100vw;
	min-height: 100vh;
	background-color: #f5f5f5;
}
.nav{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100vw;
	height: 70rpx;
	background-color: #fff;
	.nav-item{
		position: relative;
		flex: 1;
		text-align: center;
		line-height: 70rpx;
		font-size: 26rpx;
		color: #b0b0b0;
	}
}
.icon{
	position: absolute;
	bottom: 4rpx;
	left: 80rpx;
	height: 8rpx;
	width: 25rpx;
	background-color: #00c783;
	border-radius: 10rpx;
}
</style>
